import React from 'react';
import { SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import '../../styles/Aside.scss'
import { useNavigate } from 'react-router-dom';

interface Props {

}


type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
        type,
    } as MenuItem;
}

const items: MenuProps['items'] = [

    getItem('客户', '/index/custommange', null, [getItem('客户管理', '/index/custommange/staffmanage')], 'group'),
    getItem('设置', 'sub4', <SettingOutlined />, [
        getItem('客户信息', '9'),
        getItem('客户标签', '10'),
        getItem('VIP客户设置', '11'),
        getItem('黑名单客户', '12'),
        getItem('客户保存规则', '13'),
        getItem('客户分配规则', '14'),
    ]),
];

function Aside(props: Props) {
    var navigate = useNavigate()
    const onClick: MenuProps['onClick'] = (e) => {
        navigate(e.key)
    };
    return (
        <div className='aside'>
            <Menu
                onClick={onClick}
                style={{ width: 256 }}
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                mode="inline"
                items={items}
            />
        </div>
    );
}

export default Aside;